<script lang="ts" setup>
import { getStaticImage } from '@/utils/index';
import { useEnum } from '@/service/useEnum';

const props = withDefaults(
    defineProps<{
        typeText?: string;
        status?: number; // 1 待协调 2 已协调 3 进行中 4 已完成
        orderTypeName?: string;
        title?: string;
        source?: number;
        date?: string;
        address?: string;
        severity?: number; // 1 常规问题 2 比较重要 3 紧急重大
        isReset?: boolean; // 是否重办
        isRejected?: boolean; // 是否退回
        isSelf?: boolean;
    }>(),
    {
        typeText: '',
        status: 0,
        orderTypeName: '',
        title: '',
        source: 0,
        data: '',
        address: '',
        severity: 0,
        isReset: false,
        isRejected: false,
        isSelf: false
    }
);

const {
    typeText,
    status,
    orderTypeName,
    title,
    source,
    data,
    address,
    severity,
    isReset,
    isRejected,
    isSelf
} = toRefs(props);

const { getLabelByValue, getOrderSourceTypes } = useEnum();

const { refData: orderSourceTypes } = getOrderSourceTypes();

const excuteSeverity = (severity?: number) => {
    switch (severity) {
        case 1:
            return {
                text: '普通',
                type: 'cyan'
            };
        case 2:
            return {
                text: '重要',
                type: 'orange'
            };
        case 3:
            return {
                text: '重大紧急',
                type: 'red'
            };
    }
};

const excuteStatus = (
    status?: number
): {
    text: string;
    type: '' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
} => {
    switch (status) {
        case 1:
            return {
                text: '待处理',
                type: 'warning'
            };
        case 2:
            return {
                text: '处理中',
                type: 'primary'
            };
        case 99:
            return {
                text: '已完成',
                type: 'success'
            };
        case -1:
            if (isSelf.value) {
                return {
                    text: '撤销',
                    type: 'danger'
                };
            } else {
                return {
                    text: '驳回',
                    type: 'danger'
                };
            }
    }
    return {
        text: '',
        type: ''
    };
};
</script>

<template>
    <view class="event-card-container bg-front">
        <view class="header">
            <view class="flex flex-row items-center">
                <image
                    :src="getStaticImage(`/components/icon_function.png`)"
                    style="width: 48rpx; height: 48rpx"
                />
                <text class="ml-[16rpx] text-sm c-text2 mr-[16rpx]">{{
                    typeText
                }}</text>
            </view>
            <view class="flex flex-row items-center">
                <view class="mr-[10rpx]">
                    <TnTag v-if="isReset" type="danger">重办</TnTag>
                </view>
                <view class="mr-[10rpx]">
                    <TnTag v-if="isRejected" type="danger">退回</TnTag>
                </view>
                <view>
                    <TnTag v-if="status" :type="excuteStatus(status)?.type">{{
                        excuteStatus(status)?.text
                    }}</TnTag>
                </view>
            </view>
        </view>
        <view class="content">
            <view class="flex flex-row items-center justify-between mb-[24rpx]">
                <view
                    class="text-right text-base fw-700 c-text text-ep-2 w-[9/10] flex-1"
                >
                    {{ title }}
                </view>
            </view>
            <view class="flex flex-row items-start mb-[8rpx]">
                <text class="label text-left c-text2 text-xs">来源</text>
                <text class="c-text2 text-xs flex-1">{{
                    getLabelByValue(orderSourceTypes, source)
                }}</text>
                <text
                    v-if="severity"
                    class="text-xs"
                    :class="{
                        'c-cyan': excuteSeverity(severity)?.type === 'cyan',
                        'c-orange': excuteSeverity(severity)?.type === 'orange',
                        'c-red': excuteSeverity(severity)?.type === 'red'
                    }"
                    >{{ excuteSeverity(severity)?.text }}</text
                >
            </view>
            <!-- <view class="flex flex-row items-start mb-[8rpx]">
                <text class="label text-left c-text2 text-xs">类型</text>
                <text class="c-text2 text-xs flex-1">{{
                    orderTypeName || '暂无'
                }}</text>
            </view> -->
            <view class="flex flex-row items-start mb-[8rpx]">
                <text class="label text-left c-text2 text-xs">时间</text>
                <text class="c-text2 text-xs flex-1">{{ date || '暂无' }}</text>
            </view>
            <view class="flex flex-row items-start mb-[8rpx]">
                <text class="label text-left c-text2 text-xs">地点</text>
                <text class="c-text2 text-xs flex-1">{{
                    address || '暂无'
                }}</text>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.event-card-container {
    border-radius: 16rpx;

    .header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 32rpx;
        border-bottom: 1rpx solid rgba(27, 27, 32, 0.08);
        border-radius: 16rpx 16rpx 0 0;
    }
    .content {
        padding: 24rpx 32rpx;

        .label {
            width: 84rpx;
        }
    }
}
</style>
